<template>
  <div class="input-wrapper">
    <div class="input-content">
      <div class="input__left">
        <slot name="left"></slot>
      </div>
      <div class="input__center">
        <input :type="textType" title="" v-model="inputValue"
               :placeholder="placeholder"
               @blur="inputReg"
               @input="$emit('input', inputValue)"
               :maxlength="textType === 'number' && regexObject && regexObject.lengthRange ? regexObject.lengthRange.max : ''">
        <div class="input__center__tools">
          <i class="iconfont icon-qingchu" v-show="inputValue" @click="clearInputValue"></i>
          <i class="iconfont"
             :class="[{'icon-yanjing_yincang_o':!isHideValue},{'icon-yanjing_xianshi_o':isHideValue}]"
             @click="hideInputValue" v-show="canHide && inputValue"></i>
        </div>
      </div>
      <div class="input__right">
        <slot name="right"></slot>
      </div>
    </div>
    <div class="input-tip">
      <slot name="tip"></slot>
    </div>
  </div>
</template>

<script>
  export default {
    name: "ZbInput",
    props: {
      placeholder: {
        required: true
      },
      canHide: {
        required: false,
        default: false
      },
      regexObject: {
        required: false
      },
      inputType: {
        default: 'text'
      }
    },
    data() {
      return {
        inputValue: "",
        textType: this.inputType,
        isHideValue: false
      }
    },
    watch: {
      inputValue() {
        if (this.regexObject && this.regexObject.lengthRange) {
          if (this.inputValue.length > this.regexObject.lengthRange.max) {
            this.inputValue = this.inputValue.slice(0, this.regexObject.lengthRange.max);
            return false;
          }
        } else {
          return false;
        }
      }
    },
    methods: {
      inputReg() {
        console.log(this.regex(this.inputValue));
        this.$emit("checkCallback", this.regex(this.inputValue));
      },
      reg_required(value) {
        if (this.regexObject.required) {
          return !!value
        } else {
          return null;
        }
      },
      reg_regular(value) {
        if (this.regexObject.regular) {
          return this.regexObject.regular.test(value);
        } else {
          return null;
        }
      },
      reg_lengthRange(value) {
        if (this.regexObject.lengthRange) {
          return value.length >= this.regexObject.lengthRange.min
            && value.length <= this.regexObject.lengthRange.max
        } else {
          return null;
        }
      },
      reg_customFunction(value) {
        if (this.regexObject.customFunction) {
          return this.regexObject.customFunction(value);
        } else {
          return null;
        }
      },
      clearInputValue() {
        this.inputValue = ''; //清空输入框的值
        this.$nextTick(function () { //在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM
          this.$emit('input', this.inputValue); //执行传出操作
        });
      },
      regex(value) {
        let val = value.toString();
        let info = {};
        info.value = val;
        if (this.regexObject) {
          info.required = this.reg_required(val);
          info.regular = this.reg_regular(val);
          info.lengthRange = this.reg_lengthRange(val);
          info.customFunction = this.reg_customFunction(val);
        }
        return info;
      },
      hideInputValue() {
        if (this.textType === this.inputType) { //如果props内和data内相等。说明是没隐藏状态
          this.textType = "password"; //让他变为password
          this.isHideValue = true; //控制隐藏按钮的类名。更换icon
        } else {
          this.textType = this.inputType; //替换为初始化的type
          this.isHideValue = false;
        }
      }
    }
  }
</script>

<style scoped>

  .input__left .iconfont {
    font-size: 2rem;
  }

  .input-content {
    display: flex;
    flex-direction: row;
  }

  .input__left {
    padding-bottom: 0.4rem;
  }

  .input__left > span {
    font-size: 1.5rem;
  }

  .input__center {
    margin-left: .5rem;
    flex: 1;
    display: flex;
    flex-direction: row;
    padding-bottom: .3rem;
    border-bottom: 1px solid #E9E9E9;
  }

  .input__center > .input__center__tools > .iconfont {
    color: #141414;
    cursor: pointer;
    font-size: 2rem;
  }

  .input__center > input {
    text-indent: .3rem;
    flex: 1;
    border: 0;
    width: 100%;
    height: 100%;
    font-size: 1.3rem;
    color: #3b3b3b;
    outline: none;
  }

  .input__right {
    padding-left: .5rem;
    padding-bottom: .3rem;
    border-bottom: 1px solid #E9E9E9;
  }

  .icon-qingchu {
    color: #E9E9E9 !important;
  }

  .input-tip {
    margin-top: .3rem;
    margin-left: 2.45rem;
    font-size: 1rem;
  }

  .input-tip i {
    font-size: 1rem;
  }

  .input-tip--info {
    color: #BFBFBF;
  }

  .input-tip--success {
    color: #5CD18B;
  }

  .input-tip--warning {
    color: #FFC53D;
  }

  .input-tip--error {
    color: #FF7875;
  }
</style>
